<template>
	<div class="categoryBox">
		<div class="search-view">
			<div class="search-input">
				<div class="icon sousuo"></div>
				<input placeholder="输入关键词搜索!" />
			</div>
		</div>
		<div class="nav-main">
			<div class="nav-left"> 
				<div class="nav-left-item" @click="load2(v.id)" :key="k" :class="v.id==active1 && 'active'" v-for="(v,k) in dataList1">
					{{v.name || ''}} {{v.desc || ''}}
				</div>
			</div>
			<div class="nav-right">
				<div v-if="dataList2.length > 0" class="nav-right-item" v-for="(v,k) in dataList2" :key="k">
					<div class="nav-right-item-info" :class="active2==v.id && 'active'" @click="load3(v.id)">
						<span class="icon" :class="active2==k ? 'checked1 xiangxia' : 'checked2 xiangyou'"></span>
						{{v.name || ''}} {{v.desc || ''}}
					</div>
					<block v-if="active2==v.id">
						<div class="nav-right-item-sub" v-for="(vv,kk) in dataList3" :key="kk">
							<span class="icon jianshao1" :class="vv.checked ? 'checked2' : 'checked1'"></span>
							{{vv.name || ''}} {{vv.desc || ''}}
						</div>
					</block>
				</div>
				<div v-else class="empty">
					<div>加载中</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				datas: [],
				dataList1 : [],
				dataList2 : [],
				dataList3 : [],
				checkNum : [],
				active1 : 0,
				active2 : 0
			}
		},
		props: {
			height : {
				type: Number,
				default: 0
			},
			value:{
				type: Array,
				default: ()=> {return []}
			},
			url : {
				type: String,
				default: ''
			}
		},
		computed: {
			checkList() {
				return this.value
			}
		},
		mounted() {
			this.loadData()
		},
		methods: {
			async loadData(){
				this.datas = await this.$api('GET',this.url)
				this.load1()
			},
			load1() {
				this.dataList1 = []
				this.datas.forEach((item) => {
					if(item.fid == 0){
						this.dataList1.push({id:item.id,name:item.name,desc:item.desc})
					}
				})
				this.load2(this.dataList1[0].id)
			},
			load2(fid) {
				this.active1 = fid
				this.active2 = 0
				this.dataList2 = []
				this.datas.forEach((item) => {
					if(item.fid == fid){
						this.dataList2.push({id:item.id,name:item.name,desc:item.desc})
					}
				})
				this.dataList3 = []
			},
			load3(fid) {
				if(this.active2 == fid){
					this.active2 = 0
					this.dataList3 = []
				}else{
					this.active2 = fid
					this.dataList3 = []
					this.datas.forEach((item) => {
						if(item.fid == fid){
							this.dataList3.push({id:item.id,name:item.name,desc:item.desc})
						}
					})
				}
			},
			search(){
				
			}
		}
	}
</script>

<style lang="less">
	.categoryBox{
		background-color: #ffffff;
		.search-view {
			border-radius: 5px;
			background-color:#fff;
			display: flex;
			align-items: center;
			flex-direction: row;
			height: 40px;
			padding: 0 5px;
			font-size:12px;
			.search-input {
				display: flex;
				border-radius: 30px;
				background-color: #e7e7e7;
				padding: 0;
				width:100%;
				height: 30px;
				line-height: 30px;
				.icon {
					padding: 0 5px;
					color:#666666;
				}
				input{
					border: 0;
					margin-left: 30px;
					width:100%;
					text-align: left;
					background-color: transparent;
				}
			}
		}
		
		.nav-main {
			display: flex;
			.nav-left {
				width: 130px;
				height: 570px;
				overflow: hidden;
				border-right: solid 1px #E0E0E0;
				.nav-left-item {
					padding-left:10px;
					font-size: 14px;
					line-height: 40px;
					display: flex;
					align-items: center;
					border-bottom: solid 1px #E0E0E0;
					position : relative;
				}
				.active {
					color: #ffffff;
					background-color:@primary-color;
				}
			}
			.nav-right {
				height: 570px;
				width: 100%;
				.nav-right-item {
					position : relative;
					color: #000000;
					text-align: left;
					font-size: 12px;
					border-bottom: solid 1px #E0E0E0;
				}
				.nav-right-item-info{
					min-height: 40px;
					display: flex;
					align-items: center;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp:2;
				}
				.active{
					color: #ffffff;
					background-color:@primary-color;
				}
				.checked2 {
					padding:0 5px;
					color: @primary-color;
					font-size: 12px;
				}
				.checked1 {
					padding:0 5px;
					color: #ffffff;
					font-size: 12px;
				}
				.nav-right-item-sub {
					display: flex;
					text-align: left;
					align-items: center;
					min-height: 40px;
					font-size: 12px;
					border-bottom: solid 1px #E0E0E0;
				}
				.nav-right-item-sub .active{
					color: #ffffff;
					background-color:@primary-color;
				}
			}
		}
	}
</style>
